<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    select {
      width: 200px;
      height: 200px;
      background-color: #33cccc;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <select id="all" size="5" multiple="multiple">
    <option>苹果</option>
    <option>橘子</option>
    <option>梨</option>
    <option>西瓜</option>
    <option>水蜜桃</option>
  </select>

  <input type="button" value=">>" id="btn1">
  <input type="button" value="<<" id="btn2">
  <input type="button" value=">" id="btn3">
  <input type="button" value="<" id="btn4">

  <select id="choose" multiple="multiple">
  </select>

  <script src="./common.js"></script>
  <script>
    // 获取元素
    var all = my$('all')
    var choose = my$('choose')
    var btn1 = my$('btn1')
    var btn3 = my$('btn3')

    // 给第一个按钮点击事件， 让 all 中所有的子元素移动到 choose
    btn1.onclick = function() {
      var opts = all.children; // 所有的子元素
      // 获取最开始数组的个数
      var n = opts.length;
      // 将所有的 opts 添加到 choose
      for (var i = 0; i < n; i++) {
        choose.appendChild(opts[0])
      }
      // while(opts.length) {
      //   choose.appendChild(opts[0])
      // }
    }

    // 单选移动
    btn3.onclick = function () {
      var opts = all.children; // 所有的子元素
      // 存储 需要移动的内容
      var arr = [];
      // 循环遍历，判断需要移动的元素
      for (var i = 0; i < opts.length ; i++) {
        if (opts[i].selected === true) {
          arr.push(opts[i])
        }
      }
      // 对需要移动的值进行遍历
     for (var j = 0; j < arr.length; j++) {
        choose.appendChild(arr[j])
        arr[j].selected = false
     }
    }
  </script>
</body>

</html>